﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminSE</title>
    <!-- 站点定义 -->
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <link rel="icon" href="../Content/dist/img/icon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../Content/dist/img/icon.ico" type="image/x-icon" />
    <style type="text/css">body{font-family:"Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;}</style>
    <!-- 浏览器版本检测 -->
    <script type="text/javascript">
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    if ((browser=="Microsoft Internet Explorer") && (version<5))
        location.href = 'BrownerToUpdate.html';
    </script>

    <!-- 第三方css -->
    <link href="../Content/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/base.css" rel="stylesheet" type="text/css" />

    <!-- 页面专属css -->
    <link href="../Content/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.css" rel="stylesheet" type="text/css" />
    <style>
    #wysiwygEditor {overflow:scroll; max-height:300px;height:300px}
    </style>
  </head>
  <body class="skin-blue sidebar-mini">
    <div class="overlay" style="display:none;">
      <div class="loading">
        <div class="loading-center">
          <div class="loading-center-absolute">
            <div class="object object_four"></div>
            <div class="object object_three"></div>
            <div class="object object_two"></div>
            <div class="object object_one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo">
          <span class="logo-mini" title="AdminSE"><b>AdminSE</b></span>
          <span class="logo-lg"><b>Admin</b>SE</span>
        </a>
        <!-- 导航头部 -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- 左侧边栏触发按钮-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="收缩/展开">
            <span class="sr-only">收缩/展开导航</span>
          </a>
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- 用户帐户栏 -->
              <li class="dropdown user user-menu">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="../Content/dist/img/DefaultHead.png" class="user-image" alt="头像"/>
                  <span class="hidden-xs">用户名</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- 用户简介 -->
                  <li class="user-header">
                    <a href="#" style="background-color: transparent" title="更换头像">
                      <img src="../Content/dist/img/DefaultHead.png" class="img-circle" alt="User Image" />
                    </a>
                    <p>
                      自定义用户信息
                      <small>备注等内容</small>
                    </p>
                  </li>
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-primary">编辑</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-primary">注销</a>
                    </div>
                  </li>
                </ul>
              </li> <!-- end 用户帐户栏 -->
              <!-- 右侧边栏触发按钮 -->
              <li>
                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
              </li> <!-- end 右侧边栏触发按钮 -->
            </ul>
          </div>
        </nav> <!-- end 导航头部 -->
      </header>

      <!-- 左侧菜单栏 -->
      <aside class="main-sidebar">
        <section class="sidebar">
          <!-- 搜索栏 -->
          <form action="#" method="get" class="sidebar-form">
            <div class="input-group" title="功能未开放">
              <input type="text" name="q" class="form-control" placeholder="请输入搜索内容"/>
              <span class="input-group-btn">
                <button type='button' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form><!-- end 搜索栏 -->

          <!-- 菜单栏主体 -->
          <ul class="sidebar-menu"></ul>

        </section>
      </aside> <!-- end 左侧菜单栏 -->

      <!-- 页面主体内容 -->
      <div class="content-wrapper">
        <section class="content-header">
          <h1>
            富文本编辑器
          </h1>
        </section>

        <!-- content -->
        <section class="content">
          <div class="row">
            <section class="col-xs-12">
              <div class="box">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">bootstrap wysiwyg</h3>
                </div>
                <div class="box-body">
                  <div id="wysiwygEditor">
                    <p>这是一个优秀的轻量富文本编辑器！</p>
                    <p>你可以进行大量的定制化操作！</p>
                    <p>此版本是经过本人定制过的，具有如下特性：</p>
                    <p>
                      <ol>
                        <li>自动生成工具栏，工具栏含有23个常见的工具。</li>
                        <li>工具栏的功能可定制。</li>
                        <li>工具栏中的字体列表可以定制。</li>
                        <li>修复源代码中快捷键不能使用的bug。</li>
                        <li>上传图片功能采用回调函数的方式，灵活性增加</li>
                        <li>版本号定义为wysiwyg V1.0sam</li>
                      </ol>
                    </p>
                  </div>
                  <br />
                  <p>一、使用方法：</p>
                  <p>1. 添加css及js文件：</p>
                  <pre><code class="CSS">/*可选属性：定义编辑器高度，不定义的话编辑器只有一行*/<br />#wysiwygEditor {overflow:scroll; max-height:300px;height:300px}<br /></code><code class="Html">&lt;link href="../Content/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.css" rel="stylesheet" type="text/css" /&gt;<br />&lt;script src="../Content/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
                  <p>2. 添加HtmlDom：</p>
                  <pre><code class="Html">&lt;div id="wysiwygEditor"&gt;&lt;/div&gt;</code></pre>
                  <p>3. js激活：</p>
                  <pre><code class="JavaScript">$('#wysiwygEditor').wysiwyg(<span class="text-red">options</span>);</code></pre>
                  <br />
                  <p>二、获取和写入内容：</p>
                  <p>由于直接采用的是HtmlDom方式产生内容，因此，直接使用jquery.html()函数即可获取和写入内容。</p>
                  <p>
                    <button type="button" class="btn btn-primary" id="Write">写入“Hello World！”</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" id="Read">读取编辑器内容</button>
                  </p>
                  <br />
                  <p>三、参数(options)：</p>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                      <thead>
                        <th class="tab-col-2">参数</th>
                        <th class="tab-col-4">默认值</th>
                        <th class="tab-col-6">描述</th>
                      </thead>
                      <tbody>
                        <tr>
                          <td>toolbarSelector</td>
                          <td>'[name="wysiwygEditor"]'</td>
                          <td>工具栏的选择器。<br />由于定制化后的wysiwyg的工具栏是自动生成的，<br />采用了默认的name，因此，建议不要更改此选项。</td>
                        </tr>
                        <tr>
                          <td>commandRole</td>
                          <td>'edit'</td>
                          <td>工具栏产生命令的data属性。<br />由于定制化后的wysiwyg的工具栏是自动生成的，<br />采用了默认的edit，因此，建议不要更改此选项。</td>
                        </tr>
                        <tr>
                          <td>toolbarItems</td>
                          <td><pre><code>['undo','redo','font','fontsize','frontcolor','backcolor','bold','italic','strikethrough','underline','unorderedlist','orderedlist','outdent','indent','alignleft','aligncenter','alignright','alignjustify','addlink','unlink','insertimage','unformat','source'],</code></pre></td>
                          <td>可以定制需要哪些工具栏，哪些不要。</td>
                        </tr>
                        <tr>
                          <td>activeToolbarClass</td>
                          <td>'btn-info'</td>
                          <td>选中的工具高亮主题，<br />可选为 btn-default/btn-primary/<br />btn-success/btn-info/<br />btn-warning/btn-danger</td>
                        </tr>
                        <tr>
                          <td>fontItems</td>
                          <td><pre><code>['宋体', '幼圆', '黑体', '楷体', '隶书',  '华文彩云', '华文细黑', '华文行楷','Sans', 'Arial', 'Arial Black', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Tahoma', 'Times New Roman', 'Verdana']</code></pre></td>
                          <td>可选的字体，完全可以自由定制，<br />只要是常见的系统自带字体即可。</td>
                        </tr>
                        <tr>
                          <td>hotKeys</td>
                          <td><pre><code>{<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+b': 'bold',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+i': 'italic',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+u': 'underline',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+z': 'undo',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+y': 'redo',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+l': 'justifyleft',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+r': 'justifyright',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+e': 'justifycenter',<br />&nbsp;&nbsp;&nbsp;&nbsp;'ctrl+j': 'justifyfull',<br />&nbsp;&nbsp;&nbsp;&nbsp;'shift+tab': 'outdent',<br />&nbsp;&nbsp;&nbsp;&nbsp;'tab': 'indent'<br />}</code></pre></td>
                          <td>定义快捷键，目前仅能从上面几个中选择。</td>
                        </tr>
                        <tr>
                          <td>insertImage</td>
                          <td>null</td>
                          <td>
                            点击“插入图片”按钮的回调函数，<br />由于上传功能需要搭配后台，因此分离该功能，示例：<br />
                            <pre><code class="JavaScript">insertImage: function(){<br />  console.log('click insertImage button')<br />}</code></pre>
                          </td>
                        </tr>
                        <tr>
                          <td>dragAndDropImages</td>
                          <td>false</td>
                          <td>此为定制前的工具栏上传图片功能，<br />目前已经弃用该功能，因此该参数不可用。</td>
                        </tr>
                        <tr>
                          <td>selectionMarker</td>
                          <td>'edit-focus-marker'</td>
                          <td>谜之参数，建议不要更改</td>
                        </tr>
                        <tr>
                          <td>selectionColor</td>
                          <td>'darkgrey'</td>
                          <td>谜之参数，建议不要更改</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p>官网：<a href="https://github.com/mindmup/bootstrap-wysiwyg/" target="_parent">bootstrap-wysiwyg</a></p>
                </div>
              </div>

            </section>

          </div>

        </section><!-- end content -->
      </div>

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> <span>1.0</span>
        </div>
        <div><a href="https://github.com/huangjunse/AdminSE">Fork On Github</a></div>
      </footer>
      
      <!-- 右侧配置栏 -->      
      <aside class="control-sidebar control-sidebar-dark">                
        <!-- 组合表 -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
          <!-- 默认包含一个control-sidebar-theme-setting-tab，通过theme_setting.js控制 -->
          <!-- 另外，control-sidebar-home-tab是必须存在的，因为是默认表的依赖 -->
          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home fa-fw"></i></a></li>
        </ul>
        <!-- 表内容 -->
        <div class="tab-content">
          <!-- 第一个表主体 -->
          <div class="tab-pane" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">附加信息</h3>
            <ul class='control-sidebar-menu'>
              <li>
                <p style="margin: 10px;">
                  <div><a href="https://github.com/huangjunse/AdminSE">Fork On Github</a></div>

                </p>
              </li>
            </ul>
          </div><!-- end 第一个表主体 -->
        </div>
      </aside><!-- end 右侧配置栏 -->
      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

    <div class="modal fade modal-danger" id="ErrorModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">错误</h4>
          </div>
          <div class="modal-body" id="ErrorModalBody">
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="location.reload()">刷新页面</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 开始加载js脚本 -->
    <script src="../Content/plugins/jquery/jquery.min.js"></script>
    <script src="../Content/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src='../Content/plugins/fastclick/fastclick.min.js'></script>
    <script src='../Content/plugins/iCheck/icheck.min.js'></script>
    <script src="../Content/plugins/toastr/toastr.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/highlight/highlight.min.js" type="text/javascript"></script>
    <script src="../Content/dist/js/base.js" type="text/javascript"></script>
    <script src="../Content/dist/js/mainmenu.js" type="text/javascript"></script>

    <!-- 页面专属js -->
    <script src="../Content/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js" type="text/javascript"></script>
    <script src="../Content/dist/js/pages/FormEditor.js" type="text/javascript"></script>

    <!-- 基础功能及皮肤js，由于依赖的关系，需要页面完全生成完毕才能加载，故放在最后 -->
    <script src="../Content/dist/js/app.min.js" type="text/javascript"></script>
    <script src="../Content/dist/js/theme_setting.min.js" type="text/javascript"></script>
  </body>
</html>